 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考试题库</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-red/easyui.css">
</head>
<body>
<style type="text/css">
.test-one{
		height:30px;
		margin:10px auto;
		display: block;
		font-size:13px;
}
.test-serach{
		width:400px;
		height:30px;
		float:left;
}
	.itembianji{
		background-color:#1AB394;
		color:white;
		border:none;
		width:50px;
		height:20px;
		cursor: pointer;
	}
	.icon-item-bianji{
		padding-left: 20px;
		background:url('static/easyui/themes/icons/bianji.png') no-repeat 5% 50%;
		background-color:#1AB394;
	}
	.first-insert{
		width:60px;
		height:20px;
		float:left;
		margin-left:20px;
	}
	.inserttitle{
		width:60px;
		height:20px;
		color:white;
		cursor: pointer;
	}
	.icon-items-xinzeng{
		padding-left: 20px;
		border:none;
		background:url('static/easyui/themes/icons/edit_add.png') no-repeat 5% 50%;
	}
#items{
		width: 100%;
		margin:auto;
	    overflow-x: auto;
	    margin-top: 5px;
	    border-collapse: collapse;
	    border: 1px solid #e4e7ec;
	    background-color: #fff;
   		color: gray;
   		font-size:12px; 
	}
	#items thead{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	} 
	#items th{
		background: #6666661a;
	}
	#items td{
		border: 1px solid #e4e7ec;
		width: 150px;
		height: 50px;
	}
.datagrid-header-row td{
		background: #E6E6E6;
		color: #19AA9C;
	    font-size: 14px;
	    font-weight: 700;
	    text-align: center;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
		text-align: center;
	}	
	ul li{
	list-style:none;
}
#insert-title{
	width:600px;
	height:210px;
	border:solid 1px #DADADA;
	margin:auto;
}
.insert-contents{
	width:600px;
	height:130px;
	margin-top:10px;
}
#insert-left{
	width:280px;
	height:130px;
	float:left;
	margin-left:10px;
}
#insert-right{
	width:300px;
	height:130px;
	float:right;
}
#creater{
	margin-left:12px;
}
.insert-oprate{
	width:150px;
	height:25px;
	float:right;
}
.button-no{
	width:60px;
	height:20px;
	color:white;
	border:none;
	cursor:pointer;
}
.button-ok{
	width:60px;
	height:20px;
	margin-left:10px;
	color:white;
	border:none;
	cursor:pointer;
}
.icon-conpany-quxiao{
		padding-left: 20px;
		background:url('static/easyui/themes/icons/quxiao.png') no-repeat 5% 50%;
		background-color:#55BEA9;
}
.icon-conpany-queding{
		padding-left: 20px;
		background:url('static/easyui/themes/icons/queding.png') no-repeat 5% 50%;
		background-color:#55BEA9;
}
#testid{
	margin-left:12px;
}
#tidate{
	width:173px;
	height:20px;
}
#date-create{
		width:168px;	
		margin-left:3px;
	}
.leftone,.rightone{
	width:290px;
	height:25px;
	margin-top:10px;	
}
</style>
<script type="text/javascript">
function add(text){   
	$("#content-admin").panel({
		href:text
	})
}
function searchitems(name){
	$("#items").datagrid({
	    url:'select-items',
	    queryParams:{
	    	titemremark:name
	    },
	    columns:[[
	    	{field:'aa',checkbox:true,title:'选择',width:100},
	    	{field:'ttestid',hidden:true,title:'编号',width:150},
	    	{field:'item',title:'序号',width:80},
	    	{field:'titemremark',title:'题目名称',width:335},
	    	{field:'titemtypes',title:'题目类型',width:100},
	    	{field:'titemanswer',title:'答案',width:200},
	    	{field:'Staff_name',title:'创建者',width:100},
	    	{field:'titemdate',title:'创建日期',width:200,align:'center',
	    		formatter:function(val,rec){
					return formattime(val);
		        }
	    	},
	    	{field:'caozuo',title:'操作',width:100,align:'center',
				formatter: function(value,row,index){
					return "<input type='button' class='itembianji icon-item-bianji' onclick='itembianji("+row['titemid']+")' style='width:60px;height: 20px;font-size:12px;border-radius:4px;color:#fff;background-color:#18A689;cursor: pointer;' value='修改'/>";
				},
			}
	    	]],	
	         	pagination:true,
			    pageNumber:1,
			    pageSize:5,
			    pageList:[5,10,15]  
	});
}
//搜索
function checkitems(value,name){   
	searchitems($(".easyui-searchbox").val());
	}   
	$(function(){
		searchitems(null);
});
	//点击新增按钮跳转页面
	$("#items-insert").click(function(){
			add("insertitems");
		})  
	/*新增里取消按钮*/
		$("#items-quxiao").click(function(){
		$("#testitems-xinzeng").window("close");
		   $("#zhezhao").hide();
	})
	
	//隐藏遮罩层
	   $("#zhezhao").hide();
	function itembianji(id){
		$("#testitems-bianji").window("open");
		   $("#zhezhao").show();
		   $.ajax({
				url:"items-all",
				type:"get",
				dateType:"json",
				data:{titemid:id},
				success: function (result) {
					//编号
					$("#titemid").val(result[0]["titemid"]);
					//名称
		            $("#tiname").val(result[0]["titemremark"]);
					//答案
		            $("#tianswer").val(result[0]["titemanswer"]);
					//类型
		            $("#titype").val(result[0]["titemtypes"]);
					//创建日期
		            $("#tidate").datetimebox("setValue",result[0]["titemdate"]);
		        }
			});
			//点击确定
			$("#testitems-ok").click(function(){
				var id = $("#titemid").val()
				var names = $("#tiname").val();
				var answer = $("#tianswer").val();
				var type = $("#titype").val();
				var date = $("#tidate").val();
				 $.ajax({
					url:"items-xiugai",
					type:"post",
					data:{
						"titemid":id,
						"titemremark":names,
						"titemanswer":answer,
						"titemtypes":type,
						"titemdate":date
					},
					success:function(result){	
						
					}
				}); 
				$("#testitems-bianji").window("close");
				 $("#zhezhao").hide();
			});
		}
	/*编辑里取消按钮*/
	$("#testitems-no").click(function(){
		$("#testitems-bianji").window("close");
		   $("#zhezhao").hide();
	})
 //时间转换
			function formattime(value,row,index){
				var date = new Date(value);
				        var year = date.getFullYear().toString();
				        var month = (date.getMonth() + 1);
				        var day = date.getDate().toString();
				        var hour = date.getHours().toString();
				        var minutes = date.getMinutes().toString();
				        var seconds = date.getSeconds().toString();
				        if (month < 10) {
				            month = "0" + month;
				        }
				        if (day < 10) {
				            day = "0" + day;
				        }
				        if (hour < 10) {
				            hour = "0" + hour;
				        }
				        if (minutes < 10) {
				            minutes = "0" + minutes;
				        }
				        if (seconds < 10) {
				            seconds = "0" + seconds;
				        }
				        return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
			}
	//点击窗口自带的关闭按钮关闭窗口(修改)
	  /*  $(document).ready(function(){		    
		   $('#testitems-bianji').window({
		       onBeforeClose:function(){ 
		    	   $("#zhezhao").hide();
		       }
		   });
		}); */
</script>
	<div class="mytest">
		<div class="test-one">
		<div class="first-insert">
			<button id="items-insert" class="inserttitle icon-items-xinzeng"></button>
		</div>
			<div class="test-serach">
				<input class="easyui-searchbox" searcher="checkitems" style="width:240px" data-options="prompt:'名称'"></input>
			</div>
		</div>
		<div class="test-two">
			<table id="items" class="easyui-datagrid" data-options="height:300">
			</table>
		</div>
 </div>
 
<!-- 编辑 -->
<div id="zhezhao" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >
 <div id="testitems-bianji" class="easyui-window" title="编辑题目" 
 data-options="closed:true,minimizable:false,maximizable:false,collapsible:false">		
		<div class="insert-contents">
		<input type="hidden" id="titemid"/>
		<form id="insert-left">
			<div class="rightone"><span>名称：</span><input type="text" id="tiname" name="titemremark" value="${pojos.titemremark }"></div>
			<div class="rightone"><span>答案：</span><input type="text" id="tianswer" name="titemanswer" value="${pojos.titemanswer }"></div>
		</form>
		<form id="insert-right">
		<div class="leftone"><span>创建日期：</span><input type="text" id="tidate" class="easyui-datetimebox" data-options="required:true,showSeconds:false" name="titemdate" value="${pojos.titemdate }"></div>
		<div class="leftone"><span>题目类型：</span>
				<select style="width:177px;margin-left:-4px;height:22px;" id="titype" name="titemtypes" value="${pojos.titemtypes }">
						<option>请选择</option>
						<option>单选</option>
						<option>多选</option>
						<option>判断</option>
						<option>填空</option>
						<option>简答</option>
					</select>
					</div>
		</form>
	</div>
		<div class="insert-oprate">
			<button id="testitems-no" class="button-no icon-conpany-quxiao">取消</button>
			<button id="testitems-ok" class="button-ok icon-conpany-queding">确定</button>
		</div>
</div>
</div>
</body>
</html>